<template>
  <div class="selector">
    <div v-if="quest.item4" class="quest">
      <p :class="{'active': inx=== 1 }" @click="setSelector(quest,1)">{{quest.item1}} </p>
      <p :class="{'active': inx==2}" @click="setSelector(quest ,2)">{{quest.item2}} </p>
      <p :class="{'active': inx==3}" @click="setSelector(quest ,3)">{{quest.item3}} </p>
      <p :class="{'active': inx==4}" @click="setSelector(quest ,4)">{{quest.item4}} </p>
    </div>
    <div v-else class="quest">
      <p :class="{'active': inx===1}" @click="setSelector(quest,1)">{{quest.item1}} </p>
      <p :class="{'active': inx===2}" @click="setSelector(quest  ,2)">{{quest.item2}} </p>
    </div>
    <div @click="goNext " class="confirm">下一题</div>
  </div>
</template>
<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'testindex',
  setup() {
    const inx = ref(-1)
    const store = useStore()
    const router = useRouter()
    let my = {}
    function setSelector(quest, i) {
      inx.value = i
      my = quest
      my.myanswer = i + ''
    }

    const goNext = () => {
      if (inx.value === -1) {
        return
      }
      store.commit('setMyAnswer', my)
      if (store.state.questionPosition === store.state.data.length) {
        router.push('/result')
        return
      }

      store.commit('setQuestion', store.state.questionPosition)
      store.commit('setQuestionPosition')
      inx.value = -1
    }
    return {
      data: computed(() => store.state.data),
      quest: computed(() => store.state.quest),
      goNext,
      inx,
      setSelector
    }
  }
}
</script>
<style lang="less" scoped>
.selector {
  padding: 14px;
}
.quest {
  font-size: 14px;
  color: #2aa9dc;
  p {
    margin: 15px 0;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    border: 2px solid #2aa9dc;
  }
  .active {
    color: #fff;
    background-color: #2aa9dc;
  }
}
.confirm {
  margin: 30px 0;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  background: #5cb85c;
}
</style>
